<template>
  <div>
    <div class="scrollable-div scroll-wrapper" v-loading="loading">
      <el-menu router>
        <el-submenu v-for="(item , index) in categoryList" :index="index.toString()">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span>{{item.menuName}}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item v-for="(o , index) in item.list" @click="GO(o.id,item.type)">{{o.name}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
    <div class="more-function" v-loading.body="loading">
      <p><img style="width: 25px;height: 25px" src="../assets/img/火苗.png" alt=""><span style="margin-bottom: 5px">热门讨论</span></p>
      <el-card  shadow="hover" style="margin-top: 10px">
        <p @click="GoDiscuss('1')" >有哪些高收入稳定的个人理财产品？</p>
        <p class="bottom"><span>点赞数:15k</span><span>回答:20k</span></p>
      </el-card>
      <el-card shadow="hover" style="margin-top: 10px">
        <p>新手小白应该如何快速入门理财？</p>
        <p class="bottom"><span>点赞数:15k</span><span>回答:20k</span></p>
      </el-card>
    </div>
  </div>

</template>

<script>
import bus from "@/assets/js/bus";
import axios from "axios";
export default {
  name: "DiscussSlider",
  data(){
    return{
      loading: false,
      categoryList:[
        {
          id:'1',
          name: '金融文章',
          type: 'article',
          list:[
            {id:'1',name: '钢铁是怎样练成的'},
            {id:'2',name: '云边有个小卖部'},
            {id:'3',name: '雾都孤儿'},
            {id:'4',name: '简爱'},
            {id:'5',name: '三体'},
          ]
        },
        {
          id:'2',
          name: '热门文章',
          type: 'article',
          list:[
            {id: '6',name: 'Hello World'},
            {id: '7',name: '算法导论'},
            {id: '8',name: 'JAVA语言程序设计'},
            {id: '9',name: 'Office办公秘籍'},
          ]
        },
        {
          id: '3',
          name: '最新讨论',
          type: 'discuss',
          list: [
            {id:1,name:'D闪厉害还是F闪厉害？' },
            {id:2,name:'JAVA好还是Python好？' },
            {id:3,name:'算法重要还是框架重要？' },
          ]
        }
      ]
    }
  },
  methods: {
    //这两个都是路由跳转
    GoDiscuss(id){
      this.$router.push('/index/about/discuss/'+id)
    },
    GO(id,type){
      const currentId = this.$route.params.id;
      let string = this.$route.path.split('/')[2];
      if (string === 'about'){
        string = this.$route.path.split('/')[3]
      }
      console.log('currentId = ',currentId)
      console.log('string = ' ,string)
      console.log('id = ',id)
      console.log('type = ',type)
      if (currentId !== id+'' || string !== type){
        if (type === 'article' ){
          this.$router.push('/index/about/article/'+id)
        } else{
          this.$router.push('/index/about/discuss/'+id)
        }
      }
    },
    //初始化右侧菜单
    initMenu(){
      axios.get('/FinancialRecommend/article/menu')
        .then(response => {
          this.menu = response.data.data
          this.categoryList = response.data.data;
        })
    }
  },
  created() {
    //这是加载动画
    this.loading = true;
    this.initMenu()
    setTimeout(() => {
      this.loading = false
    },500)
  }
}
</script>

<style lang="less" scoped>
.scroll-wrapper {
  margin: 50px auto;
  //height: 685px; /* Set the height of your scrollable div */
  height: 300px; /* Set the height of your scrollable div */
  width: 300px;
  overflow-y: auto; /* Enable vertical scrollbar when content overflows */
  box-shadow:  0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  //border-radius: 20px;
}
.scroll-wrapper::-webkit-scrollbar{
  display: none;
}
.container {
  display: flex;
  justify-content: space-between;
}

.scrollbar-wrap {
  overflow: auto; /* 显示滚动条 */
  width: 336px;
  height: 90vh;
}

.more-function{
  user-select: none;
  height: 280px;
  p{
    cursor: pointer;
  }
  //background-color:skyblue ;
}
p{
  font-family: "钉钉进步体 Regular";
}
.bottom{
  margin: 10px;
  font-weight: lighter;
  font-size: 10px;
  span{
    margin: 0 10px  ;
  }
}
</style>
